{% extends 'base.html' %}

{% block title %}生活工具{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">生活工具</h1>
        <p class="text-gray-600">提供各种实用的生活辅助工具，让日常生活更加便捷</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for tool in tools %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6">
                <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4">
                    <i class="fas {{ tool.icon }} text-pink-500 text-2xl"></i>
                </div>
                <h2 class="text-xl font-bold text-gray-800 mb-2">{{ tool.name }}</h2>
                <p class="text-gray-600 mb-4">{{ tool.description }}</p>
                <a href="{{ url_for('life_tools.' + tool.slug|replace('-', '_')) }}" class="inline-block px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors duration-300">
                    开始使用
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %} 